import React, { Component } from 'react'
import { Flex, Button } from 'react-vant';

export default class MyNav extends Component {

    render() {
        let { data, dataIndex, setIndex } = this.props
       /*  console.log(this.props); */

        return (
            /* 布局组件中的区域间隔 */
            <Flex gutter={16} wrap='wrap'>
                {
                    data.map((item,index) => {
                        return <Flex.Item span={6} key={index}>
                            <Button type={dataIndex==index?'primary':'default'} 
                            block round size='small' onClick={()=>{
                                setIndex(index)
                            }}
                            >{item}</Button>
                        </Flex.Item>
                    })
                }
            </Flex>
        )
    }
}
